<template>
  <div>
    <el-dialog :center="true" :title="title" :visible.sync="formVisible" width="950px" :before-close="() => {$emit('update:formVisible', false), $refs['ruleForm'].resetFields()}" @open="openHandle">
      <div v-loading="loadingForm" class="from_box">
        <div>
          <mainTilte title="UPS推荐地址" />
          <el-form :model="ruleForm" inline class="dialog-form-expand2">
            <el-form-item label="国家" :label-width="formLabelWidth">
              <span style="width:247px">{{ ruleForm.ship_country }}</span>
            </el-form-item>
            <el-form-item label="州" :label-width="formLabelWidth">
              <span style="width:247px">{{ ruleForm.ship_stateorprovince }}</span>
            </el-form-item>
            <el-form-item label="城市" :label-width="formLabelWidth">
              <span>{{ ruleForm.ship_cityname }}</span>
            </el-form-item>
            <el-form-item label="邮编" :label-width="formLabelWidth">
              <span>{{ ruleForm.ship_postalcode }}</span>
            </el-form-item>
            <el-form-item label="街道1" :label-width="formLabelWidth">
              <span>{{ ruleForm.ship_street1 }}</span>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <mainTilte title="用户地址" />
        </div>
        <el-form ref="ruleForm" :model="ruleForm" inline :rules="rules" class="dialog-form-expand2">
          <!-- 买家的名字 -->
          <!-- <el-form-item label="买家名字" :label-width="formLabelWidth" prop="buyer_firstname">
            <el-input v-model.trim="ruleForm.buyer_firstname" :disabled="disableAddress" placeholder="请输入买家名字" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item> -->
          <!-- 买家的姓氏 buyer_lastname-->
          <!-- <el-form-item label="买家姓氏" :label-width="formLabelWidth" prop="buyer_lastname">
            <el-input v-model.trim="ruleForm.buyer_lastname" :disabled="disableAddress" placeholder="请输入买家姓氏" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item> -->
          <!-- 姓名 -->
          <el-form-item label="买家姓名" :label-width="formLabelWidth" prop="address_name">
            <el-input v-model.trim="ruleForm.address_name" :disabled="disableAddress" placeholder="请输入买家姓名" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的邮箱 -->
          <el-form-item label="买家邮箱" :label-width="formLabelWidth">
            <el-input v-model.trim="ruleForm.address_email" :disabled="disableAddress" placeholder="请输入买家邮箱" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家电话 prop="address_phone"-->
          <el-form-item label="买家电话" :label-width="formLabelWidth" prop="address_phone">
            <el-input v-model.trim="ruleForm.address_phone" :disabled="disableAddress" placeholder="请输入买家电话" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的国家的代码 -->
          <el-form-item label="国家" :label-width="formLabelWidth" prop="address_country">
            <!-- <el-select v-model="ruleForm.address_country" :disabled="disableAddress" placeholder="请选择店铺" filterable clearable style="width:247px">
              <el-option v-for="item in optionpCountry" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
            <el-input v-model.trim="ruleForm.address_country" :disabled="disableAddress" placeholder="请输入买家电话" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的州/省（英文简写缩写） -->
          <el-form-item label="州/省" :label-width="formLabelWidth" prop="address_stateorprovince">
            <!-- <el-select v-model="ruleForm.address_stateorprovince" :disabled="disableAddress" placeholder="请选择州/省" filterable clearable style="width:247px" @change="changeState">
              <el-option v-for="item in optionStates" :key="`${item.id}States`" :label="`${item.code}(${item.cname})`" :value="item.code" />
            </el-select> -->
            <el-input v-model.trim="ruleForm.address_stateorprovince" :disabled="disableAddress" placeholder="请输入买家电话" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的城市 (英文全称) address_cityname-->
          <el-form-item label="城市" :label-width="formLabelWidth" prop="address_cityname">
            <!-- <el-select v-model="ruleForm.address_cityname" :disabled="disableAddress" placeholder="请选择城市" filterable clearable style="width:247px" @change="changeCity">
              <el-option v-for="item in optionCity" :key="`${item.id}city`" :label="`${item.name}(${item.cname})(${item.code})`" :value="item.lower_name" />
            </el-select> -->
            <el-input v-model.trim="ruleForm.address_cityname" :disabled="disableAddress" placeholder="请输入买家电话" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的邮编 -->
          <el-form-item label="邮编" :label-width="formLabelWidth" prop="address_postalcode">
            <!-- <el-select v-model="ruleForm.address_postalcode" :disabled="disableAddress" placeholder="请选择邮编" filterable clearable style="width:247px" @change="inputChange">
              <el-option v-for="item in optionPostalCode" :key="item.zip" :label="item.zip" :value="item.zip" />
            </el-select> -->
            <!-- <el-autocomplete v-model="ruleForm.address_postalcode" style="width:247px" :fetch-suggestions="queryPostalcode" @select="handleSelect" /> -->
            <el-input v-model.trim="ruleForm.address_postalcode" :disabled="disableAddress" placeholder="请输入买家电话" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的街道1 -->
          <el-form-item label="街道1" :label-width="formLabelWidth" prop="address_street1">
            <el-input v-model.trim="ruleForm.address_street1" :disabled="disableAddress" placeholder="请输入街道1" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的街道2 -->
          <el-form-item label="街道2" :label-width="formLabelWidth" prop="address_street2">
            <el-input v-model.trim="ruleForm.address_street2" :disabled="disableAddress" placeholder="请输入街道2" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>
          <!-- 买家的街道3 -->
          <el-form-item label="街道3" :label-width="formLabelWidth" prop="address_street3">
            <el-input v-model.trim="ruleForm.address_street3" :disabled="disableAddress" placeholder="请输入街道3" autocomplete="off" clearable style="width:247px" @input="inputChange" />
          </el-form-item>

        </el-form>
        <div style="text-align: center; margin:50px 0;">
          <el-button type="primary" :loading="isbtn" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="handleCancelDown">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  statesList,
  cityList,
  cityPostalCode
} from '@/utils/publicData'
import { objContrast } from '@/utils/index'
export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    formVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '编辑'
    }
  },
  data() {
    return {
      addressId: '',
      dataObjOriginal: {},
      loadingForm: false,
      formLabelWidth: '120px',
      disableAddress: false,
      checkedFiled: [],
      isIndeterminate: true,
      ruleForm: {
        address_name: '',
        buyer_firstname: '',
        buyer_lastname: '',
        address_email: '',
        address_phone: '',
        address_postalcode: '',
        address_country: '',
        address_country_name: '',
        address_stateorprovince: '',
        address_cityname: '',
        address_street1: '',
        address_street2: '',
        address_street3: ''
      },
      optionpCountry: [{
        value: 'US',
        label: 'United States'
      }],
      optionStates: [],
      optionCity: [],
      optionPostalCode: [],
      isbtn: false,
      rules: {
        address_name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }, {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        }],
        // buyer_lastname: [{
        //   required: true,
        //   message: '请输入姓',
        //   trigger: 'blur'
        // }, {
        //   min: 1,
        //   max: 30,
        //   message: '长度在 1 到 20 个字符',
        //   trigger: 'blur'
        // }],
        address_email: [{
          required: false,
          message: '请输入邮箱地址',
          trigger: 'blur'
        }, {
          type: 'email',
          message: '请输入正确的邮箱地址',
          trigger: ['blur', 'change']
        }],
        address_phone: [{
          required: false,
          message: '请输入电话',
          trigger: 'blur'
        },
        {
          min: 10,
          message: '电话最少10位',
          trigger: 'blur'
        }],
        address_country: [{
          required: true,
          message: '请选择国家',
          trigger: 'blur'
        }],
        address_stateorprovince: [{
          required: true,
          message: '请选择州/省',
          trigger: 'blur'
        }],
        address_cityname: [{
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }],
        address_postalcode: [{
          required: true,
          message: '请选择邮编',
          trigger: 'blur'
        }],
        time: null
      }
    }
  },
  methods: {
    handleSelect(e) {
      // const that = this
      console.log('=======', e)
      // that.supplier_id = e.id
    },
    // 查询邮编
    queryPostalcode(queryString, cb) {
      const result = this.optionPostalCode.filter(e => e.zip.includes(queryString))
      clearTimeout(this.time)
      this.time = setTimeout(() => {
        cb(result)
      }, 1000)
    },
    inputChange() {
      this.$forceUpdate()
    },
    // 关闭
    handleCancelDown() {
      this.$emit('update:formVisible', false)
    },
    submitForm(formName) {
      if (this.checkedFiled.length > 0) {
        this.ruleForm.checkedFiled = this.checkedFiled
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!objContrast(this.dataObjOriginal, this.ruleForm)) {
            this.$message.info('未作修改')
            return
          }
          this.isbtn = true
          this.$http.post(`deliveryOrders/updateAddress/${this.addressId}`, this.getDataEdit()).then(response => {
            if (response.code === 10000) {
              this.$message.success('编辑成功')
              this.$refs[formName].clearValidate()
              this.$emit('handleRefresh')
              this.handleCancelDown()
              this.isbtn = false
            } else {
              this.isbtn = false
              this.$message.error(response.message)
            }
          }).catch(() => {
            this.isbtn = false
          })
        }
      })
    },
    openHandle() {
      this.loadingForm = true
      this.isbtn = false
      statesList().then((data) => {
        this.optionStates = data
        this.orderInfo(this.id)
      })
    },
    // 详情
    orderInfo(id) {
      this.loadingForm = true
      this.$http.post(`/deliveryInfo?order_id=${this.id}`, { type: 1 }).then((res) => {
        if (res.code === 10000) {
          const dataObj = res.data.user_addres
          this.ruleForm = dataObj
          this.addressId = dataObj.id
          // this.ruleForm.address_name = dataObj.address_name
          // this.ruleForm.buyer_firstname = ''
          // this.ruleForm.buyer_lastname = ''
          // this.ruleForm.address_email = dataObj.address_email
          // this.ruleForm.address_phone = dataObj.address_phone
          // this.ruleForm.address_country = dataObj.address_country
          // this.changeState(dataObj.address_stateorprovince)
          // this.ruleForm.address_country_name = dataObj.address_country_name
          // this.ruleForm.address_stateorprovince = dataObj.address_stateorprovince
          // // this.changeCity(dataObj.address_cityname)
          // this.ruleForm.address_cityname = dataObj.address_cityname
          // this.ruleForm.address_postalcode = dataObj.address_postalcode
          // this.ruleForm.address_street1 = dataObj.address_street1
          // this.ruleForm.address_street2 = dataObj.address_street2
          // this.ruleForm.address_street3 = dataObj.address_street3
          this.dataObjOriginal = { ...this.ruleForm }
          this.loadingForm = false
        } else {
          this.loadingForm = false
          this.$message.error(res.message)
        }
      })
    },
    // 编辑参数
    getDataEdit() {
      const obj = Object.assign({}, this.ruleForm)
      const address = {}
      address.address_name = obj.address_name
      address.buyer_firstname = obj.buyer_firstname
      address.buyer_lastname = obj.buyer_lastname
      address.address_email = obj.address_email
      address.address_phone = obj.address_phone
      address.address_postalcode = obj.address_postalcode
      address.address_country = obj.address_country
      const address_country_name1 = this.optionpCountry.filter((item) => {
        return item.value === obj.address_country
      })
      address.address_country_name = address_country_name1[0].label
      address.address_stateorprovince = obj.address_stateorprovince
      address.address_cityname = obj.address_cityname
      address.address_street1 = obj.address_street1
      address.address_street2 = obj.address_street2
      address.address_street3 = obj.address_street3
      return address
    },
    // 修改省份
    changeState(value) {
      const address_stateorprovince = this.optionStates.filter((arr) => {
        return arr.code === value
      })
      console.log(address_stateorprovince, value, this.optionStates)
      if (address_stateorprovince.length) {
        cityList(address_stateorprovince[0].id).then(data => {
          this.optionCity = data
        })
      } else {
        return
      }

      this.ruleForm.address_postalcode = ''
      this.ruleForm.address_cityname = ''
    },
    // 城市
    changeCity(value) {
      const obj = this.optionCity.filter((arr) => {
        return arr.lower_name === value
      })
      if (obj && obj[0].id) {
        cityPostalCode(obj[0].id).then(data => {
          this.optionPostalCode = data.sort((a, b) => {
            return a.zip - b.zip
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
